<template>
	<div>
		<div class="userInfo">
			<img class="avatar" :src="userInfos.avatar" />
			<div class="info">
				<span>昵称：{{userInfos.nickname}}</span>
				<span>手机：{{userInfos.mobile}}</span>
				<span>性别：{{userInfos.sex=1 ? "男" : "女"}}</span>
				<span>出生日期：{{userInfos.created_at|formatDate}}</span>
				<div>
					所在城市：{{userInfos.city}}
				</div>
			</div>
		</div>

		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="购买记录" name="first">

				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="购买终端">
						<el-select placeholder="请选择" v-model="value" size="small">
							<el-option label="启用" value="shanghai"></el-option>
							<el-option label="禁用" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品名称">
						<el-input size="small" placeholder="请输入商品关键字"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button size="small" icon="el-icon-search">搜索</el-button>
						<el-button size="small" icon="el-icon-refresh">重置</el-button>
					</el-form-item>
				</el-form>

				<el-table border style="width: 100%" stripe>
					<el-table-column label="购买时间" width="180" align="center">
					</el-table-column>
					<el-table-column label="商品名称" width="180" align="center">
					</el-table-column>
					<el-table-column label="价格(元)" align="center">
					</el-table-column>
					<el-table-column label="购买终端" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center">
					</el-table-column>
				</el-table>

				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="this.detailParams.page" :page-sizes="[5,10,12,16]"
					:page-size="this.detailParams.limit" layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</el-tab-pane>
			<el-tab-pane label="积分详情" name="second">

				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="变动终端">
						<el-select placeholder="请选择" v-model="value" size="small">
							<el-option label="启用" value="shanghai"></el-option>
							<el-option label="禁用" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="积分事件">
						<el-input size="small" placeholder="请输入事件名称关键字"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button size="small" icon="el-icon-search">搜索</el-button>
						<el-button size="small" icon="el-icon-refresh">重置</el-button>
					</el-form-item>
				</el-form>

				<el-table border style="width: 100%" stripe>
					<el-table-column label="变动时间" width="180" align="center">
					</el-table-column>
					<el-table-column label="积分事件" width="180" align="center">
					</el-table-column>
					<el-table-column label="积分值" align="center">
					</el-table-column>
					<el-table-column label="变动终端" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center">
					</el-table-column>
				</el-table>

				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="this.detailParams.page" :page-sizes="[5,10,12,16]"
					:page-size="this.detailParams.limit" layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				</el-pagination>

			</el-tab-pane>
			<el-tab-pane label="Ta的评价" name="third">评价</el-tab-pane>
			<el-tab-pane label="Ta的反馈" name="fourth">反馈</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件状态值
		data() {
			return {
				detailParams: {
					limit: 5,
					page: 1,
				},
				total: 0,
				activeName: 'first',
				// 学员信息
				userInfos: [],
				id: "",
				value: "",
			}
		},
		// 组件方法
		methods: {
			handleSizeChange() {},
			handleCurrentChange() {},
			handleClick(tab, event) {},
			async getUserInfoList() {
				try {
					let id = this.$route.params.uid;

					const {
						data: res
					} = await this.$http.get(`user/${this.id}`);
					console.log(res)
					let actIndex = res.data.list.filter(item => {

						return item.uid == id;
					})

					if (res.code !== 200) {
						return this.$message.error(res.msg)
					}
					this.userInfos = actIndex[this.total];

				} catch (e) {
					this.$message.error(e)
				}
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			this.getUserInfoList()
		},
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		width: 100%;
		height: 106px;
		border: 1px solid #d0d0d0;
		margin-top: 5px;
		background-color: #f8f9f8;
		display: flex;

		.info {
			margin: 20px;

			span,
			div {
				margin-right: 140px;
				font-size: 12px;
				color: #545c64;
			}

			div {
				margin-top: 20px;
			}
		}

		.avatar {
			width: 64px;
			height: 64px;
			border-radius: 50%;
			margin: 20px;
		}
	}

	.el-tabs {
		margin-top: 20px;
	}
</style>
